<template>
  <!-- 计算属性 -->
  <h1>今年的年龄：{{ age }}</h1>
  <h1>十年后的年龄：{{ newAge }}</h1>
</template>

<script>
import { computed, ref } from 'vue';
export default {
  //   vue2 实现计算属性
  //   data() {
  //     return {
  //       age: 18,
  //     };
  //   },
  //   computed: {
  //     newAge() {
  //       return this.age + 10;
  //     },
  //   },

  //  vue3 计算属性
  setup() {
    const age = ref(20);
    // 计算属性
    const newAge = computed(() => age.value + 10);
    return { age, newAge };
  },
};
</script>
